import React from 'react'
import PropTypes from 'prop-types'
import { Popconfirm, Table, Button } from 'antd'

const ProductList = ({onDelete, products}) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name'
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="确认删除?" onConfirm={() => onDelete(record.id)}>
          <Button>删除</Button>
        </Popconfirm>
      )
    }
  }]
  return (
    <Table
      dataSource={products}
      columns={columns}
      rowKey={(record) => record.id}
    />
  )
}

ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired
}

export default ProductList
